body {
    margin: 0; /* 外边距 */
    padding: 0; /* 内边距 */
    display: flex; /* 弹性盒模型 */
    justify-content: center; /* 主轴对齐方式 */
    align-items: center; /* 交叉轴对齐方式 */
    background: #925b47; /* 背景颜色 */
    height: 100vh; /* 高度 */
}
.faviconContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.favicon {
    width: 80px;
    height: 80px;
}
.loader {
    position: relative; /* 相对定位，为了不让子元素定位到根而设置 */
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 边框圆角 */
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); /* 背景渐变 */
    animation: animate 0.5s linear infinite; /* 动画：名称 时间 速率曲线 重复 */
}
@keyframes animate {
    0% {
        transform: rotate(0deg); /* 旋转 */
    }
    /* 利用修改旋转角度而实现环绕 */
    100% {
        transform: rotate(360deg);
    }
}
.loader span {
    position: absolute; /* 绝对定位 */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
}
.loader span:nth-child(1) { /* 第一个span元素 */
    filter: blur(5px); /* 过滤：模糊 */
}
.loader span:nth-child(2) { /* 第二个span元素 */
    filter: blur(10px);
}
.loader span:nth-child(3) {
    filter: blur(25px);
}
.loader span:nth-child(4) {
    filter: blur(50px);
}
.loader::after { /* 之后添加，为中心的黑色 */
    content: ''; /* 内容 */
    position: absolute;
    /* 当设置了2个对立的定位时，元素的大小为对立距离 如此处的高为
    100px - 10px - 10px = 80px
    (父元素 - top - left)
    */
    top: 10px; /* 距上部 */
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #925b47;
    border-radius: 50%;
}